document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tabs span');
    const topNavItems = document.querySelectorAll('.top-nav li');
    const bottomNavItems = document.querySelectorAll('.bottom-nav li');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelector('.tabs .active').classList.remove('active');
            tab.classList.add('active');
        });
    });

    topNavItems.forEach(item => {
        item.addEventListener('click', () => {
            document.querySelector('.top-nav .active').classList.remove('active');
            item.classList.add('active');
        });
    });

    bottomNavItems.forEach(item => {
        item.addEventListener('click', () => {
            document.querySelector('.bottom-nav .active').classList.remove('active');
            item.classList.add('active');
        });
    });
});
